<template>
	<view>
		<view class="listBot">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
					:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
				</u-tabs>
			</u-sticky>
		</view>
		<view class="tab-page" v-if="current==0">
			<view class="list">
				<view class="list-item1" v-for="(item,index) in list2" :key="index">
					<view class="title">
						<view class="left-title">{{item.title}}</view>
						<view :class="item.stopFlag==1?'wx-type type':item.status==1?'use-type type':item.status==2?
						'wx-type type':item.status==3?'wb-type type':item.status==4?'dj-type type':'type'" v-if="item.status">
							{{item.stopFlag==1?'停用':item.status==1?'使用中':item.status==2?'维修中':item.status==3?'维保中':item.status==4?'点检中':''}}
						</view>
					</view>
					<view class="content" v-for="(s,index) in item.list" :key="index">
						<view class="left-txt">{{s.txt}}</view>
						<view class="right-txt" v-if="s.value&&s.value.length<32">{{s.value}}</view>
						<image :src="s.value" v-if="s.value&&s.value.length>=32" @tap="()=>previewImage(s)" mode="">
						</image>
					</view>
				</view>
				<view class="num_fixed">
					<view class="num_flex">
						<view class="">
							待维修
						</view>
						{{list2[0].repairCount ? list2[0].repairCount : 0}}
					</view>
					<view class="num_flex">
						<view class="">
							待维保
						</view>

						{{
							list2[0].maintainCount ? list2[0].maintainCount : 0
						}}
					</view>
					<view class="num_flex">
						<view class="">
							待点检
						</view>

						{{
							list2[0].checkCount ? list2[0].checkCount : 0
						}}
					</view>
				</view>
			</view>
		</view>
		<view class="tab-page" v-if="current==1">
			<view class="dropdown">
				<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(3)" ref="dropdown1" active-color="#0F53AC">
					<zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
			<view class="list-title">
				<view class="list-left">
					关联备件数量：{{(saomaInfo.totalAmount==0||saomaInfo.totalAmount=="" || !saomaInfo.totalAmount)?'0':saomaInfo.totalAmount}}件
				</view>
				<view class="list-right">
					关联备件总价值：{{(saomaInfo.totalMoney==0||saomaInfo.totalMoney=="" || !saomaInfo.totalMoney)?'0':saomaInfo.totalMoney}}元
				</view>
			</view>
			<view class="list-info" v-for="(item,index) in shebeiList" :key="index" v-if="shebeiList.length>0">
				<view class="item-top">
					<view class="left">工单号:{{item.orderNum}}</view>
					<view class="right" @click="togoBjdetail(item)">备件详情</view>
				</view>
				<view class="item-main">
					<view class="main-left">
						<view class="txt1">备件使用数量</view>
						<view class="txt2">{{item.totalAmount}}</view>
					</view>
					<view class="main-left main-right">
						<view class="txt1">备件总价值</view>
						<view class="txt2">{{(item.totalMoney==0||item.totalMoney=='')?'0元':item.totalMoney+'元'}}</view>
					</view>
				</view>
				<view class="item-main">
					<view class="main-left">
						<view class="txt1">使用类型</view>
						<view class="txt2">{{item.useType==1?'维修':item.useType==2?'保养':item.useType==3?'点检':''}}</view>
					</view>
					<!-- <view class="main-left main-right">
						<view class="txt1">工单完成时间</view>
						<view class="txt2">2022/2/1620:11:11元</view>
					</view> -->
				</view>
			</view>
			<!-- <u-loadmore color="#2f2f2f" line /> -->
			<view class="empty-data" v-if="shebeiList.length==0">
				<u-empty mode="data" :marginTop="100"></u-empty>
			</view>

		</view>
		<view class="tab-page" v-if="current==2">
			<view class="dropdown">
				<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(3)" ref="dropdown1" active-color="#0F53AC">
					<!-- <zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first"></zb-dropdown-item> -->
					<zb-dropdown-item :options="option2" v-model="value2" @change="change2" name="two">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
			<view class="list-title">
				<view class="list-left">全部履历数：{{personList.length}}个</view>
				<!-- <view class="list-right">关联备件总价值：123456.5元</view> -->
			</view>
			<view class="list-info" v-for="(item,index) in personList" :key="index" @click="selectDetail(item)">
				<view class="item-top">
					<view class="left2">履历类型：{{item.careerType==1?'维修':item.careerType==2?'维保':''}}</view>
					<view class="right">查看详情</view>
				</view>
				<view class="item-main">
					<view class="main-left">
						<view class="txt1">关联工单号</view>
						<view class="txt2">{{item.orderNum}}</view>
					</view>
					<view class="main-left main-right">
						<view class="txt1">创建人</view>
						<view class="txt2">{{item.createUserName}}</view>
					</view>
				</view>
				<view class="item-main">
					<view class="main-left">
						<view class="txt1">创建时间</view>
						<view class="txt2">{{item.createTime}}</view>
					</view>
					<!-- <view class="main-left main-right">
						<view class="txt1">工单完成时间</view>
						<view class="txt2">2022/2/1620:11:11元</view>
					</view> -->
				</view>
			</view>
			<view class="empty-data" v-if="personList.length==0">
				<u-empty mode="data" :marginTop="100"></u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				deviceId: '',
				option: [{
						text: '升序',
						value: 1
					},
					{
						text: '降序',
						value: 2
					}
				],
				option2: [{
						text: '全部',
						value: ''
					},
					{
						text: '维修',
						value: 1
					},
					{
						text: '维保',
						value: 2
					}
				],
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				value1: 1,
				value2: "",
				show: false,
				show2: false,
				list: [{
					name: '基本信息',
				}, {
					name: '备件信息',
				}, {
					name: '设备履历'
				}],
				list2: [{
						title: '设备信息',
						status: '',
						list: [{
								id: 1,
								txt: '设备编号',
								value: ""
							},
							{
								id: 2,
								txt: '设备名称',
								value: ""
							},
							{
								id: 3,
								txt: '设备类型',
								value: ""
							},
							{
								id: 4,
								txt: '设备型号',
								value: ""
							},
							{
								id: 5,
								txt: '位置号',
								value: ""
							},
							{
								id: 6,
								txt: '所在部门',
								value: ""
							},
							{
								id: 7,
								txt: '设备二维码',
								value: ""
							}
						]
					},
					{
						title: '购买安装信息',
						status: '',
						list: [{
								id: 8,
								txt: '设备价值（万元）',
								value: ""
							},
							{
								id: 9,
								txt: '能耗(KW/h)',
								value: ""
							},
							// {
							// 	id: 10,
							// 	txt: '参数',
							// 	value: ""
							// },
							{
								id: 11,
								txt: '购买日期',
								value: ""
							},
							{
								id: 12,
								txt: '投产日期',
								value: ""
							},

							{
								id: 13,
								txt: '使用年限',
								value: ""
							},
							{
								id: 14,
								txt: '供应商',
								value: ""
							},
							{
								id: 15,
								txt: '厂家',
								value: ""
							},

							{
								id: 16,
								txt: '品牌',
								value: ""
							},
							{
								id: 17,
								txt: '设备照片',
								value: ""
							}
						]
					}

				],
				selectItem: {},
				params: {
					pn: 1,
					ps: 10,
					deviceId: '',
					sortType: 1 //排序类型；1.升序  2.降序
				},
				lvliParams: {
					pn: 1,
					ps: 10,
					deviceId: '',
					careerType: "" //履历类型；1.维修   2.维保 
				},
				saomaInfo: {},
				shebeiList: [],
				currentPage: '',
				pages: '',
				personList: [],
				stopFlag: 0
			}
		},
		onLoad(options) {
			console.log('123',options.id)
			if(options.id){
				this.deviceId = options.id;
			}
			this.getdeviceList();
		},
		methods: {
			//预览图片
			previewImage: function(e) {
				uni.previewImage({
					current: e.value,
					urls: [e.value]
				});
			},

			getlvliList() {
				uni.$u.http.post(`/device/mobile/deviceCareer/careerList`, this.lvliParams).then(res => {
					if (res.code == 0) {
						this.personList = res.data.records;
					}
				}).catch(err => {})
			},
			getselectPartUsageList() {
				uni.$u.http.post(`/device/mobile/deviceInfo/selectPartUsageList`, this.params).then(res => {
					if (res.code == 0) {
						this.shebeiList = res.data.records;
					}
				}).catch(err => {})
			},
			getdeviceList() {
				uni.$u.http.get(`/device/mobile/deviceInfo/deviceDetail/${this.deviceId}`).then(res => {
					console.log('12344444',res)
					if (res.code == 0) {
						// if(res.data.stopFlag == 1){
						// 	uni.$u.toast('该设备已停用')
						// 	return
						// }
						if (res.data.removeFlag == 1) {
							uni.$u.toast('该设备已被删除')
							return
						}
						this.saomaInfo = res.data;
						this.pages = res.data.pages;
						this.currentPage = res.data.current;
						// this.totalCount=res.data.total
						this.list2[0].status = res.data.deviceStatus;
						this.list2[0].stopFlag = res.data.stopFlag;
						this.list2[0].repairCount = res.data.repairCount;
						this.list2[0].maintainCount = res.data.maintainCount;
						this.list2[0].checkCount = res.data.checkCount;
						this.list2[0].list[0].value = res.data.deviceNum;
						this.list2[0].list[1].value = res.data.deviceName;
						this.list2[0].list[2].value = res.data.deviceTypeName;
						this.list2[0].list[3].value = res.data.modelName;
						this.list2[0].list[4].value = res.data.seatNum;
						this.list2[0].list[5].value = res.data.deptName;
						this.list2[0].list[6].value = res.data.qrCodePicture;

						this.list2[1].list[0].value = res.data.deviceCost.toString(); //设备编号
						this.list2[1].list[1].value = res.data.energyConsumption.toString();
						this.list2[1].list[2].value = res.data.purchaseDate;
						this.list2[1].list[3].value = res.data.operationDate;
						this.list2[1].list[4].value = res.data.usefulLife ? (res.data.usefulLife + '年') :
							''; //使用年限
						this.list2[1].list[5].value = res.data.purveyorName;
						this.list2[1].list[6].value = res.data.manufacturer;
						this.list2[1].list[7].value = res.data.brand;
						this.list2[1].list[8].value = res.data.devicePicture;
					} else {
						setTimeout(()=>{
							uni.$u.toast(res.message)
							console.log('12344444')
						},200)
					}
				}).catch(err => {
					// uni.showToast({
					// 	icon: 'none',
					// 	mask: true,
					// 	title: err,
					// 	duration: 200,
					// 	success:function(){
					// 		console.log('success')
					// 	}
					// });
				})
			},
			tabsClick(e) {
				this.current = e.index
				this.show = false
				this.show2 = false
				if (this.current == 0) {
					this.getdeviceList();
				}
				if (this.current == 1) {
					this.params.pn = 1;
					this.params.deviceId = this.deviceId;
					this.getselectPartUsageList()

				}
				if (this.current == 2) {
					this.lvliParams.pn = 1;
					this.lvliParams.deviceId = this.deviceId;
					this.getlvliList();
				}
			},
			close() {
				this.show = !this.show
			},
			open() {

			},
			isShowPage() {
				this.show = !this.show
			},
			isShowPage2() {
				this.show2 = !this.show2
			},
			togoBjdetail(item) {
				uni.navigateTo({
					url: '/pages/subPackagesA/saoma/bjdetails?info=' + encodeURIComponent(JSON.stringify(this
						.saomaInfo)) + '&orderNum=' + item.orderNum
				})
			},
			selectDetail(item) {
				uni.navigateTo({
					url: '/pages/subPackagesA/saoma/resumeDetail?careerType=' + item.careerType + '&orderNum=' +
						item.orderNum + '&id=' + item.id
				})
			},
			toggleItem(val) {
				if (val === 1) {
					this.$refs.dropdown1.close()
				}
			},
			change1(val) {
				this.params.sortType = this.value1;
				this.params.pn = 1;
				this.params.deviceId = this.deviceId;
				this.getselectPartUsageList();
			},
			change2(val) {
				this.lvliParams.pn = 1;
				this.lvliParams.deviceId = this.deviceId;
				this.lvliParams.careerType = this.value2;
				this.getlvliList();
			}
		},
		onReachBottom() {
			if (this.currentPage >= this.pages) return;
			this.status = 'loading';
			this.currentPage = ++this.currentPage;
			setTimeout(() => {
				this.getselectPartUsageList()
				if (this.currentPage >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.num_fixed {
		position: fixed;
		bottom: 400rpx;
		right: 48rpx;
		border: 1px solid #f2f2f2;
		background-color: #fff;
		z-index: 200;

		.num_flex {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 12px;
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #f2f2f2;
		}
	}

	.tab-page {
		// margin-top: 10rpx;

		.list {
			.list-item1 {
				background: #f2f2f2;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 40rpx;

					.left-title {
						color: #2f2f2f;
						font-size: 34rpx;
					}

					.type {
						// width: 96rpx;
						// height: 48rpx;
						padding: 8rpx 24rpx;
						text-align: center;
						// line-height: 48rpx;
						font-size: 12px;
						font-weight: 400;
					}

					.use-type {
						color: rgba(2, 173, 130, 1);
						border-radius: 4px;
						background: rgba(2, 173, 130, 0.2);
					}

					.wx-type {
						border-radius: 4px;
						background: rgba(252, 119, 10, 0.2);
						color: rgba(252, 119, 10, 1);
					}

					.wb-type {
						border-radius: 4px;
						background: rgba(15, 83, 172, 0.2);
						color: rgba(15, 83, 172, 1);
					}

					.dj-type {
						border-radius: 4px;
						background: rgba(15, 83, 172, 0.2);
						color: rgba(15, 83, 172, 1);
					}

				}

				.content {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 40rpx;
					background: #fff;
					border-bottom: 1px solid #f2f2f2;
					align-items: center;

					image {
						width: 120rpx !important;
						height: 120rpx !important;
					}

					.left-txt {
						color: #8c8c8c;
						font-size: 34rpx;
						// width: 200rpx;
						flex: 0 0 200rpx;
					}

					.right-txt {
						color: #2b2b2b;
						font-size: 34rpx;
					}
				}

			}
		}

		.dropdown {
			.list2 {
				.sort {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #000000;
					padding: 20rpx 0;
				}
			}

			.sort-list {
				width: 100%;
				height: 100vh;
				background: #9d9d9d;
				z-index: 22;
				position: absolute;

				.sort-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 40rpx 10rpx 20rpx;
					font-size: 34rpx;
					border-bottom: 1px solid #f2f2f2;
					z-index: 99;
					position: relative;
					background: #fff;
				}

				.sort-item:last-child {
					border-bottom: none;
				}

				.sort-item:first-child {
					border-top: 1px solid #f2f2f2;
				}
			}
		}

		.list-title {
			padding: 28rpx 32rpx;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			font-weight: 400;
			// letter-spacing: 0px;
			// line-height: 0px;
			color: #8c8c8c;
			background: #F5F5F5;
		}

		.list-info {
			font-size: 30rpx;
			background: #fff;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				justify-content: space-between;
				padding: 32rpx;
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				border-bottom: 1px solid #f2f2f2;

				.right {
					font-size: 14px;
					font-weight: 400;
					color: #0F53AC;
				}

				.left2 {
					font-size: 16px;
					font-weight: 400;
					color: #2b2b2b;
				}

			}

			.item-main {
				display: flex;
				justify-content: flex-start;
				padding: 4rpx 32rpx;

				.main-left {
					width: 50%;
					text-align: left;
					// margin-right: 100rpx;

					.txt1 {
						color: #8c8c8c;
						padding: 10rpx 0;
						font-size: 15px;
						font-weight: 400;
					}

					.txt2 {
						color: #4D4D4D;
						font-size: 14px;
						font-weight: 400;
					}
				}

				.main-right {
					width: 50%;
					text-align: left;
				}
			}

		}

		.list-info:last-child {
			border-bottom: none;
		}
	}

	.u-tabs__wrapper__nav__item {
		// padding: 0 !important;
		width: 33%;
	}
</style>
